<template>
    <div class="customer">
        <div v-if="list&&list.length==0" class="no-data"><i class="iconfont icon-icon-test1"></i>暂无数据</div>
        <yd-infinitescroll v-if="list.length!=0" :callback="loadList" ref="infinitescrollDemo">
            <yd-preview v-for="(item, key) in list" :buttons="btns" :key="key" slot="list">

                <yd-preview-header>
                    <div slot="left">账号</div>
                    <div slot="right">{{item.accountId}}</div>
                </yd-preview-header>
                <yd-preview-item>
                    <div slot="left">姓名</div>
                    <div slot="right">{{item.userName}}</div>
                </yd-preview-item>
                <yd-preview-item>
                    <div slot="left">邮箱</div>
                    <div slot="right">{{item.email}}</div>
                </yd-preview-item>
                <yd-preview-item>
                    <div slot="left">手机</div>
                    <div slot="right">{{item.phoneNum}}</div>
                </yd-preview-item>
                <yd-preview-item>
                    <div slot="left">QQ</div>
                    <div slot="right">{{item.qqInfo}}</div>
                </yd-preview-item>
            </yd-preview>
            <!-- 数据全部加载完毕显示 -->
            <span slot="doneTip">啦啦啦，啦啦啦，没有数据啦~~</span>

            <!-- 加载中提示，不指定，将显示默认加载中图标 -->
            <img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg"/>
        </yd-infinitescroll>
        <yd-backtop></yd-backtop>
    </div>
</template>
<script>
    import AjaxHttp from '../../js/ajaxHttp.js';
    import Vue from 'vue';
    import {InfiniteScroll} from 'vue-ydui/dist/lib.rem/infinitescroll';

    Vue.component(InfiniteScroll.name, InfiniteScroll);
    export default{
        data(){
            return {
                list: [],
                btns: [],
                pageNo: 1,
                pageSize: 10
            }
        },
        created(){
            this.getList(false, this.pageNo, this.pageSize);
        },
        methods: {
            getList(flag, pageNo, pageSize){
                const _this = this;
                AjaxHttp.getHttp('fxsys/MT5Audit/index?pageNo=' + pageNo + '&pageSize=' + pageSize).then(function (response) {
                    console.log(response);
                    //response.page.records = [];
                    const _list = response.records;
                    _this.list = _this.list.concat(_list);
                    if (flag) {

                        if (_list.length < _this.pageSize) {
                            /* 所有数据加载完毕 */
                            _this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                            return;
                        }

                        /* 单次请求数据完毕 */
                        _this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');
                    }

                    _this.pageNo++;
                });
            },
            loadList(){
                this.getList(true, this.pageNo, this.pageSize);
            }
        }
    }
</script>